<template>
  <div class="tpl-portlet-components">
    <div class="tpl-block">
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
            <div class="am-modal-dialog">
              <div class="am-modal-hd">表单导入Excel
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
              </div>
              <div class="am-modal-bd">
                <div class="am-form-inline" role="form">
                  <div class="am-form-group">
                    <input type="name" class="am-form-field" placeholder="文件名" v-model="ex.name">
                  </div>
  
                  <div class="am-form-group">
                    <select id="doc-select-1" class="am-form-field" v-model="ex.page">
                      <option v-for="page in ex.pageSum" :value="page">{{(page - 1) * 500}} ~ {{page * 500}} 数据</option>
                    </select>
                  </div>
                  &nbsp;
                  <button type="button" class="am-btn am-btn-default" @click="excelExport(ex.name, ex.page)" data-am-modal-close>导出</button>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div class="am-u-sm-12 am-u-md-4">
          <div class="am-input-group am-input-group-sm">
            <input v-model="fuzzy" @keyup.enter="onSearch" type="text" class="am-form-field" placeholder='请输入“关键词”查看信息'>
            <span class="am-input-group-btn">
              <button @click="onSearch" class="am-btn  am-btn-default am-btn-secondary tpl-am-btn-success am-icon-search" type="button"></button>
              <button class="am-btn am-btn-secondary" data-am-collapse="{target: '#collapse-nav-comment'}">更多条件
                <i class="am-icon-chevron-down"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
  
      <nav>
        <div id="collapse-nav-comment" class="tpl-content-wrapper am-collapse am-animation-fade" style="padding-left:0;">
          <div class="tpl-portlet-components">
            <div class="tpl-block ">
              <div class="am-g tpl-amazeui-form">
                <form class="am-form">
                  <time-search @setEctime="setEctime" @setSctime="setSctime"></time-search>
                </form>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div class="am-g">
        <div class="am-u-sm-12">
          <form class="am-form">
            <table class="am-table am-table-striped am-table-hover table-main">
              <thead>
                <tr>
                  <th class="table-id">序号</th>
                  <th class="am-hide-sm-only">账号</th>
                  <th>车位</th>
                  <th>状态改变</th>
                  <th class="am-hide-sm-only">时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(list, index) in lists">
                  <td>{{index + 1}}</td>
                  <td class="am-hide-sm-only">
                    {{list.user.phone}}
                    <!--<router-link :to="{name: 'WxUserForm', params: {userId: list.userId}}">{{list.user.nickname}}</router-link>-->
                  </td>
                  <td>
                    {{list.park.name}}
                    <!--<router-link :to="{name: 'ProjectForm', params: {id: list.parkId}}">{{list.project.name}}</router-link>-->
                  </td>
                  <td>改为{{list.dState | dataStateFmt}}</td>
                  <td class="am-hide-sm-only">{{list.ctime | date}}</td>
                </tr>
              </tbody>
            </table>
          </form>
          <!--<loading :show="loading" :isNoData="lists.length === 0"></loading>-->
          <pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
        </div>
      </div>
    </div>
    <auth-msg></auth-msg>
  </div>
</template>

<script>
import * as apis from '../apis'
import excel from '../assets/excel'
export default {
  name: 'BsParkStateLog',
  props: {
    parkId: { type: String, default: '' },
    userId: { type: String, default: '' }
  },
  data() {
    return {
      lists: [],
      fuzzy: '', sctime: '', ectime: '',
      count: 0,
      page: 1,
      pageSize: 20,
      ex: { name: '', page: 1, pageSum: 0 },
      loading: false
    }
  },
  watch: {
    userId() {
      this.getCount()
    }
  },
  created() {
    this.getCount()
  },
  methods: {
    getCount() {
      apis.parkstatelogCount(this.fuzzy, this.sctime, this.ectime, this.parkId, this.userId).then(({ data: data }) => {
        console.log('->', data)
        this.allCount = data.data.count
        this.count = Math.ceil(data.data.count / this.pageSize)
        this.ex.pageSum = Math.ceil(data.data.count / 500)
        if (data && data.errcode === 0 && data.data.count > 0) {
          console.log(data);
          this.getLists()
        } else {
          this.lists = []
        }
      })
    },
    getLists() {
      this.loading = true
      this.lists = []
      apis.parkstatelogList(this.page, this.pageSize, this.fuzzy, this.sctime, this.ectime, this.parkId, this.userId).then(({ data: data }) => {
        this.loading = false
        console.log('list', data)
        if (data && data.errcode === 0 && data.data.list) {
          this.lists = data.data.list
        }
      })
    },
    changePage(page) {
      this.page = page
      this.getLists()
    },
    onSearch() {
      this.page = 1
      this.getCount()
    },
    setSctime(val) {
      this.sctime = val
    },
    setEctime(val) {
      this.ectime = val
    },
    renovate(page) {
      this.getCount()
    },
    // excelExport(name, page) {
    //   let col = { comment: '评论内容', 'user.nickname': '创建用户', ctime: { name: '创建时间', time: 1 }, 'project.name': '所属项目' }
    //   apis.parkstatelogList(page, 500).then(({ data: data }) => {
    //     if (data && data.data_code === 1 && data.data.list) {
    //       let rows = data.data.list
    //       excel.export(col, rows, name)
    //       this.ex.name = ''
    //       this.ex.page = 1
    //     }
    //   })
    // }
  }
}
</script>